<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改目标检测数据集')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-detectionDataset-edit" th:object="${detectionDataset}">
            <input id="id" name="id" th:field="*{id}"  type="hidden">
			<div class="form-group">	
				<label class="col-sm-3 control-label">数据集名称：</label>
				<div class="col-sm-8">
					<input id="name" name="name" th:field="*{name}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">宽：</label>
				<div class="col-sm-8">
					<input id="height" name="height" th:field="*{height}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">高：</label>
				<div class="col-sm-8">
					<input id="width" name="width" th:field="*{width}" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">是否公开：</label>
				<div class="col-sm-8">
					<select id="isPublic" name="isPublic" th:field="*{isPublic}" class="form-control">
						<option value="1">是</option>
						<option value="0">否</option>
					</select>
				</div>
			</div>
		</form>
    </div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "detection/detectionDataset";
		$("#form-detectionDataset-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			},
			focusCleanup: true
		});
		// 记录修改前后的高和宽，有变化再进行图片的resize操作
		var oldHeight = $('#height').val();
		var oldWidth = $('#width').val();
		console.log(oldHeight, oldWidth)
		
		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/edit", $('#form-detectionDataset-edit').serialize());
				// ajax提交表单发送id到后端，根据id查询对应数据，如果高和宽有变化，进行图片的resize操作
				if (oldHeight!= $('#height').val() || oldWidth!= $('#width').val()) {
					console.log('图片尺寸有变化，进行resize操作')
					// console.log($('#height').val(), $('#width').val())
					var formData = new FormData();
					formData.append('id', $('#id').val());
					formData.append('height', $('#height').val());
					formData.append('width', $('#width').val());
					$.ajax({
						url: prefix + "/resizePicture", // 后端控制器的请求路径
						type: 'POST',
						data: formData,
						processData: false,
						contentType: false,
						success: function (response) {
							console.log(response);
						},
						error: function (xhr, status, error) {
							console.error('请求失败:', error);
						}
					});
				}
	        }
	    }





	</script>
</body>
</html>
